<template>
  <d2-container>
    <el-form :inline="true" :model="dataSearch" ref="dataSearch">
      <el-form-item label="学生姓名" prop="name">
        <el-input v-model="dataSearch.name" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
            <el-form-item label="班级" prop="class" >
                <el-select
                        v-model="dataSearch.class"
                        filterable
                        placeholder="请选择班级"
                        @change="classSelected"
                        :disabled="disabled"
                >
                    <el-option
                            v-for="item in classList"
                            :key="item._id"
                            :label="item.name"
                            :value="item._id"
                    ></el-option>
                </el-select>
            </el-form-item>
      <el-form-item label="校区" prop="school" v-if='showSchool'>
                <el-select
                        v-model="dataSearch.school"
                        filterable
                        placeholder="请选择校区"
                        @change="schoolSelected"
                        :disabled="disabled"
                >
                    <el-option
                            v-for="item in schoolList"
                            :key="item._id"
                            :label="item.name"
                            :value="item._id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <div style='display: block'>
        <el-form-item label="开始时间">
            
                <el-date-picker
                        v-model="dataSearch.startDate"
                        type="date"
                        placeholder="选择日期时间"
                        
                        >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              
                <el-date-picker
                        v-model="dataSearch.endDate"
                        type="date"
                        placeholder="选择日期时间"
                        
                        >
                </el-date-picker>
            </el-form-item>
          
      <el-form-item>
        <el-button type="primary" @click="formSubmit">
          <d2-icon name="search" />查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="formReset">
          <d2-icon name="refresh" />重置
        </el-button>
      </el-form-item>
      </div>
      <!-- <a href="#/work-record-new">
        <el-button type="primary" style="float:right" icon="el-icon-plus">补打卡</el-button>
      </a> -->
    </el-form>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="student.name" label="学生姓名"></el-table-column>
      <el-table-column prop="class.name" label="班级"></el-table-column>
      <el-table-column prop="class.course.name" label="课程"></el-table-column>
      <!-- <el-table-column prop="class.teacher[0].name" label="老师"></el-table-column> -->
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="status" label="状态 (1为上课，0为缺课）">
       <template slot-scope="scope">
              <span v-if="scope.row.status == 0" style="color:green">{{scope.row.status == 0 ? 1 : 0}} </span>
              <span v-else-if="scope.row.status == 1" style="color:red">{{scope.row.status == 1 ? 0 : 1}}</span>
              <span v-else>123</span>
            </template>
            </el-table-column>
      <!-- <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="detailClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      background
      layout="total,sizes,prev, pager, next,jumper"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handlerSizeChange"
      @next-click="handleNextPage"
      @prev-click="handlePrevClick"
    ></el-pagination>
  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import formatTime from "@/libs/util.formatTime";
import { mapState } from "vuex";

export default {
  data() {
    return {
      dataList: [],
      classList : [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      classroom: [],
      dataSearch: {school:undefined,startDate:undefined,endDate:undefined,class:undefined},
      showSchool : false
    };
  },
   computed:{
    ...mapState('d2admin/user',['info'])
  },
  methods: {
    formSubmit() {
      this.dataSearch.page = this.currentPage;
      this.dataSearch.pageSize = this.pageSize;
      this.getDataList(this.dataSearch);
    },
    formReset() {
      this.$refs.dataSearch.resetFields();
      this.dataSearch = {school:undefined,startDate:undefined,endDate:undefined,class:undefined}
      this.getDataList(this.dataSearch);
    },
    handleClick(e) {
      this.$router.push({ path: "/classroom-detail?id=" + e._id });
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.dataSearch.page = this.currentPage;
      this.dataSearch.pageSize = this.pageSize;
      this.getDataList(this.dataSearch);
    },
    handlerSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.dataSearch.page = this.currentPage;
      this.dataSearch.pageSize = this.pageSize;
      this.getDataList(this.dataSearch);
    },
    handleNextPage() {
      this.currentPage = this.currentPage + 1;
      this.dataSearch.page = this.currentPage;
      this.dataSearch.pageSize = this.pageSize;
      this.getDataList(this.dataSearch);
    },
    handlePrevClick() {
      this.currentPage = this.currentPage - 1;
      this.dataSearch.page = this.currentPage;
      this.dataSearch.pageSize = this.pageSize;
      this.getDataList(this.dataSearch);
    },

    schoolSelected(){
      this.getClassList()
      this.dataSearch.class = undefined
    },
    detailClick(e) {

      this.$router.push({path: "/student-record-detail?id=" + e._id});

    },
                            getSchoolList() {
                let data = {};
                data.page = 1
                data.pageSize = 99999
                request({
                    url: "/school/getSchoolList",
                    method: "post",
                    data
                }).then(res => {
                    this.schoolList = res.data.school;
                    // 返回数据
                });
            },

           getClassList() {
                let data = {};
                data.page = 1
                data.pageSize = 99999
                data.schoolLimit = this.dataSearch.school
                request({
                    url: "/class/getClassList",
                    method: "post",
                    data
                }).then(res => {
                  console.log(res)
                    this.classList = res.data.class;
                    // 返回数据
                });
            },
    getDataList(data) {
      var datax = data
      datax.school = this.dataSearch.school
      datax.page = this.dataSearch.page
      datax.pageSize = this.dataSearch.pageSize
      if (this.dataSearch.class != ''){
        datax.class = this.dataSearch.class
      }
      if (this.dataSearch.startDate != undefined){
        datax.startDate = this.dataSearch.startDate
      }
      if (this.dataSearch.endDate != undefined){
        datax.endDate = this.dataSearch.endDate
      }
      request({
        url: "/student/getStudentRecordList",
        method: "post",
        data: data
      }).then(res => {
        this.dataList = [];
        this.dataList = res.data.records;
      
        this.dataList.forEach((item, index) => {
          this.dataList[index].time = formatTime.formatTime(this.dataList[index].createdAt)
        });
        console.log(res.data.total,'dss')
        this.total = res.data.total;
        this.currentPage = res.data.currentPage;
      });
    },
  },
  created() {
    this.dataSearch.page = this.currentPage;
    this.dataSearch.pageSize = this.pageSize;
        this.school = this.info.school[0]
        this.dataSearch.school = this.school._id
    if ((this.school.headquarter == 1) || (this.school.headquarter == 2)){
      this.showSchool = true
                this.getSchoolList()
                this.dataSearch.school = this.school._id
                this.getClassList()
    }

    this.getDataList(this.dataSearch);

  }
};
</script>
